<template>
  <div class="out-box">
    <div class="pic-view">
      <img :src="user.form.avatar" alt="My Image"  />
      <div  style="display: flex;flex-direction: column;align-content: center">
        <span>{{user.form.name}}</span>
        <p>学生</p>
      </div>
      <el-button class="button1" @click="editHandler">信息更改</el-button>
      <div style="height: 133px"></div>
    </div>
    <div class="out-card">
      <div class="text-person">
        <p style="font-size: 35px;color: rgb(255 255 255 / 55%);font-family: 微软雅黑 ">基本信息:</p>
        <span></span>
      </div>
      <div class="text-person">
        <p>姓名:</p>
        <span>{{user.form.name}}</span>
      </div>
      <div class="text-person">
        <p>账号:</p>
        <span>{{user.form.username}}</span>
      </div>
      <div class="text-person">
        <p>密码:</p>
        <span>{{user.form.password}}</span>
      </div>
      <div class="text-person">
        <p>身份证号:</p>
        <span>{{user.form.identi}}</span>
      </div>
      <div class="text-person">
        <p>性别:</p>
        <span>{{user.form.sex}}</span>
      </div>
      <div class="text-person">
        <p>年龄:</p>
        <span>{{user.form.age}}</span>
      </div>
      <div class="text-person">
        <p>手机号:</p>
        <span>{{user.form.phone}}</span>
      </div>
    </div>
    <div>
    </div>

  </div>
  <el-dialog v-model="data.formVisible" title="个人信息" width="30%" style="min-width: 400px;border-radius: 10px" destroy-on-close >
    <el-form style="width: 80%;margin: 0 auto" :model="data.form" label-width="100px" ref="formRef" label-position="right" >
      <el-form-item prop="name" label="姓名">
        <el-input v-model="dataFinal.form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="password" label="学生密码">
        <el-input v-model="dataFinal.form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" >
        <el-input v-model="dataFinal.form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" >
        <div>
          <el-radio-group v-model="radio2.sex" >
            <el-radio label="男" border>男</el-radio>
            <el-radio label="女" border>女</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="手机号" >
        <el-input v-model="dataFinal.form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号码" >
        <el-input v-model="dataFinal.form.identi" autocomplete="off" />
      </el-form-item>
      <el-form-item label="头像" >
        <el-upload action="avatarUpload" :limit="1" :on-success="uploadSuccess" list-type="picture">
          <el-button>上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible=false">关闭</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive,ref} from "vue";
import {Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "../../router";
const dataFinal = reactive({
  form: {}
})

const formRef = ref();
const radio2 = reactive({
  sex:''
})
// const avatarUpload = () =>{
//   request.request({
//     url:'/files/upload',
//     method: 'POST',
//     data
//   })
// }
const data = reactive({
  name:'',
  username: '',
  age: '',
  sex:'',
  phone:'',
  identi:'',
  avatar:'',
  tableData:[],
  total: 0,
  pageNum: 1, //当前的页码
  pageSize: 10, // 每页个数
  formVisible: false,
  form: {}
})
const uploadSuccess = (res) => {

  ElMessage.success("上传成功");
  dataFinal.form.avatar = res.data;
};
const editHandler=()=>{
  data.form = JSON.parse(localStorage.getItem("student-user"))
  data.formVisible = true
}
let user=reactive({
  form:{}
})
 user.form= JSON.parse(localStorage.getItem("student-user"));
dataFinal.form = JSON.parse(localStorage.getItem("student-user"))
const  save =() =>{
  formRef.value.validate((valid)=>
  {
    dataFinal.form.sex = radio2.sex;
    if(valid){
      data.form.sex = radio2.value
      request.request({
        url: '/studentIfo/update',
        method:  'PUT',
        data: dataFinal.form,
      }).then(res=>{
            if(res.code==='200'){
              data.formVisible=false
              ElMessage.success('更改成功')
              refre()
              user.name = dataFinal.form.name
            }
            else{
              ElMessage.error(res.mag)
            }
          }
      )
    }
  })}
const refre=() =>{
      data.form.sex = radio2.value
      request.get( '/studentIfo/selectSingle/'+user.form.username
      ).then(res=>{
            if(res.code==='200'){
              localStorage.setItem('student-new',JSON.stringify(res.data))
              user.form = JSON.parse(localStorage.getItem("student-new"));
            }
            else{
              ElMessage.error('重定向失败！')
            }
          }
      )
}

</script>

<style scoped>
.out-box{
  position: relative;
  margin: 0px auto;
  width: 100%;
  padding-top: 40px;
  height: 105%;
  display: flex;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.out-card{
  background-color: transparent;
  color: white;
  margin-left: 20px;
  min-width:610px;
  height: 650px;
  border-radius: 10px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 0 5px #565656;
  backdrop-filter: blur(8px);
}
.pic-view{
  color: white;
  overflow: hidden;
  background-color: transparent;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  height: 417px;
  min-width: 234px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  backdrop-filter: blur(8px);
}
.pic-view span{
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
  font-family: 幼圆;
  font-weight: bolder;
  display: inline-block;
  margin-bottom: 8px;
}
.pic-view p{
  text-align: center;
  margin: 0 auto;
  font-family: "微软雅黑 Light";
  font-size: 18px;
  color: rgba(255, 255, 255, 0.63);
  margin-bottom: 20px;
}
.pic-view img{
  margin-bottom: 10px;
  width:120px;
  height:120px;
  border-radius: 50%;
}
.pic-view el-upload{
  width: 100%;
}
.button1{
  background-color: transparent;
  color: white;
  margin-right: 0px;
  font-size: 20px;
  font-family: 幼圆;
  font-weight: bolder;
  border: none;
  background: linear-gradient(90deg, #006fff,rgb(174, 213, 255)) no-repeat right bottom ;
  background-size: 0 3px;
  transition: background-size 0.5s,background-color 0.5s;
  width: 106%;
  height: 40px;
}
.button1:hover{
  background-color: rgba(255, 255, 255, 0.45);
  border-radius: 0px;
  background-size: 100% 3px;
  background-position-x: left;
}
.button1:focus{

  color: #d7d7d7;
}
.text-person{
  height: 60px;
}
.text-person{
  padding-right: 230px;
  font-size: 25px;
  font-family: '仿宋', bold , sans-serif;
  font-weight: bolder;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px;
}
.text-person p{
  text-align: right;
}
.text-person span{
  font-family: 仿宋;
  font-size: 25px;
  text-align:left ;
  display: inline-block;
  width: 50%;
}
</style>
